<template>
  <div class="guide-container">
    <el-card shafow="always" class="guide-card">
      <div class="guide-panel">
        <svg-icon icon-class="computer" class="guide-icon"></svg-icon>
        <div class="content">
          <span>帮助中心</span>
          <span>帮您解决问题、疑问</span>
        </div>
      </div>
    </el-card>
    <el-card shafow="always">
      <div v-for="(item, index) in dataSource" :key="index" class="panel-item">
        <span>{{ item.title }}</span>
        <a class="link-btn" @click="viewMore(item.id)">了解更多</a>
      </div>
      <div class="no-content" v-if="!dataSource.length">暂无内容</div>
      <div style="text-align: center" v-if="dataSource.length">
        <el-button type="text" @click="goToHelpCenter"> 查看更多 </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'GuidePanel',
  props: {},
  data() {
    return {
      dataSource: [],
      listQuery: {
        pageNo: 1,
        pageSize: 5
      }
    }
  },
  computed: {
    ...mapState('help', ['sectionList']),
    whiteList() {
      return [
        { key: 'user', tabCode: '10-01' },
        { key: 'equipment', tabCode: '10-02' },
        { key: 'order', tabCode: '10-03' },
        { key: 'operation', tabCode: '10-04' },
        { key: 'finance', tabCode: '10-05' },
        { key: 'setting', tabCode: '10-07' }
      ]
    }
  },
  watch: {
    $route() {
      this.getList()
    }
  },
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    // 获取栏目
    async getList() {
      let path = this.$route.path
      let tabCode = this.whiteList.filter(item => path.includes(item.key))[0]
      const params = {
        clientSource: 10,
        ...this.listQuery
      }
      if (tabCode) params.tabCode = tabCode.tabCode
      const {
        data: { records }
      } = await this.$http.commons.getHelpList({ params })
      this.dataSource = records
    },
    viewMore(id) {
      this.$router.push({ name: 'AddDetail', query: { type: 'check', id, platform: 10 } })
    },
    goToHelpCenter() {
      this.$router.push({ name: 'HelpCenter' })
    }
  }
}
</script>

<style lang="scss" scoped>
.guide-container {
  padding: 20px 20px 20px 0;
  .guide-card {
    margin-bottom: 20px;
    .guide-panel {
      display: flex;
      font-size: $hw-font-size-base;
      .guide-icon {
        width: 40px;
        height: 40px;
      }
      .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 15px;
      }
    }
  }
  .panel-item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 15px;
    font-size: $hw-font-size-base;
    .link-btn {
      color: #1890ff;
      text-decoration: underline;
      margin: 10px 0 15px;
      font-size: $hw-font-size-sm;
    }
  }
}
.no-content {
  font-size: 14px;
  text-align: center;
}
</style>
